<template>
	<div class="caledar_wrap">
		<!--月份 -->
		<div class="month">
			<ul>
				<li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li>
				<li class="year-month" @click="pickYear(currentYear,currentMonth)">
					<span class="choosen-year">{{ currentYear }}年</span>
					<span class="choosen-month">{{ currentMonth }}月</span>
				</li>
				<li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li>
			</ul>
		</div>
		<!-- 星期 -->
		<ul class="weekdays">
			<li class="row" v-for="(item, index) in weeekDays" :key="index">{{item}}</li>
		</ul>
		<!-- 日期 -->
		<ul class="days">
			<!-- 循环-->
			<li v-for="dayobject in days">
				<!--本月-->
				<span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month" @click="handleClick(dayobject.day)">{{ dayobject.day.getDate() }}</span>

				<!--判断天数是否正确-->
				<span v-else>
					<!--今天-->
					<!-- <span v-if="dayobject.day.getFullYear() == new Date().getFullYear() && dayobject.day.getMonth() == new Date().getMonth() && dayobject.day.getDate() == new Date().getDate()"
						class="active">{{ dayobject.day.getDate() }}</span> -->
					<span v-if="sourceData.includes(dayobject.day.getDate())" class="active">{{dayobject.day.getDate()}}</span>
					<span v-else 
					@click="handleClick(dayobject.day.getDate())"
					:class="activeFlag==dayobject.day.getDate() ? 'active' : ''">{{ dayobject.day.getDate() }}</span>
				</span>

			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: 'y-caledar',
		props: {
			sourceData: {
				type: Array,
				default: ()=> {
					return [21, 22]
				}
			}
		},
		data() {
			return {
				activeFlag: 0,
				currentDay: 1,
				currentMonth: 1,
				currentYear: 1970,
				currentWeek: 1,
				weeekDays: ['一','二','三','四','五','六','日'],
				days: []
			}
		},
		mounted() { 
			this.initData(null)
			this.sourceData.map(item=> {
				return Number(item)
			})
		},
		methods: {
			initData(cur) {
				let leftcount = 0
				let date;
				if (cur) {
					date = new Date(cur)
				} else {
					let now = new Date()
					let d = new Date(this.formatDate(now.getFullYear(), now.getMonth(), 1))
					d.setDate(35)
					date = new Date(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
				}
				this.currentDay = date.getDate()
				this.currentYear = date.getFullYear()
				this.currentMonth = date.getMonth() + 1
				this.currentWeek = date.getDay() // 1...6,0
				if (this.currentWeek == 0) {
					this.currentWeek = 7
				}
				let str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay)
				this.days.length = 0
				//初始化
				for (let i = this.currentWeek - 1; i >= 0; i--) {
					let d = new Date(str)
					d.setDate(d.getDate() - i)
					let dayobject = {}
					dayobject.day = d
					this.days.push(dayobject)
				}
				for (let i = 1; i <= 35 - this.currentWeek; i++) {
					let d = new Date(str)
					d.setDate(d.getDate() + i)
					let dayobject = {}
					dayobject.day = d
					this.days.push(dayobject)
				}
			},
			pickPre(year, month) {
				let d = new Date(this.formatDate(year, month, 1))
				d.setDate(0)
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
			},
			pickNext(year, month) {
				let d = new Date(this.formatDate(year, month, 1))
				d.setDate(35)
				this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1))
			},
			pickYear(year, month) {
				console.log(year + "," + month)
			},
			// 返回 类似 2016-01-02 格式的字符串
			formatDate(year, month, day) {
				let y = year
				let m = month
				if (m < 10) m = "0" + m
				let d = day
				if (d < 10) d = "0" + d
				return y + "-" + m + "-" + d
			},
			
			handleClick(data) {
				this.activeFlag = data			
				if(typeof data == 'object') {
					// 表示非本月
					let oDate = new Date(data)					
					console.log(oDate.getFullYear())
					console.log(oDate.getMonth() +1)
					console.log(oDate.getDate())
				} else {
					console.log(this.currentYear)
					console.log(this.currentMonth)
					console.log(data)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import './style/index.scss';
</style>
